<!DOCTYPE html>
<html lang="en">
<head th:include="cultivateWeb/header :: culHeaderCss"></head>
<link type="text/css" href="/css/cultivateWeb/style/course.css" rel="stylesheet">
<body id="body" style="background: #F8F9FB">
<header th:include="cultivateWeb/header :: header"></header>
<style>
    * {
        font-size: 14px
    }
</style>
<main id="main" style="background: #fff">
    <section id="pay">
        <input type="hidden" id="courseId" th:value="${courseId}"/>
        <div class="div_3 step_3">
            <img style="width:568px" src="/img/payStep2.png"/>
            <span class="step1 this1">确认订单</span>
            <span class="step2 this1">支付</span>
            <span class="step3">支付成功</span>
        </div>
        <div class="flex" style="margin-top:110px;float: left;width: 50%">
            <div>
                <img class="wd140" src="/img/WePayLogo.png"/>
                <span>| 收银台</span>
            </div>
            <div class="mid1">
                <div>订单将在2个小时后关闭，请及时支付</div>
                <div class="mar20">
                    <img class="wd200" id="img" src=""/>
                </div>
                <div>请使用微信扫一扫完成支付</div>
            </div>
        </div>
        <div class="flex_1" style="margin-top:110px;float: left;width: 50%">
            <div style="margin-left: 60px">
                <div class="title">课程订单</div>
                <div class="price_1">¥<span class="price" th:text="${courseAmount}"></span></div>
                <div class="mar10">
                    <span class="gray">收款方</span>
                    <span class="black">湖南金职伟业母婴护理有限公司</span>
                </div>
                <!--<div class="mar10">-->
                <!--<span class="orderTime">下单时间</span>-->
                <!--<span class="black">2020-03-12 11:00:29</span>-->
                <!--</div>-->
                <div class="mar10">
                    <span class="gray">订单号</span>
                    <span class="black" th:text="${courseOrderId}"></span>
                </div>
            </div>
        </div>
        <div style="clear: both"></div>
        <input type="hidden" th:value="${courseOrderId}" id="courseOrderId"/>
        <input type="hidden" th:value="${courseAmount}" id="courseAmount"/>
    </section>
</main>
<div class="footer" th:include="cultivateWeb/header :: footer"></div>
<script>
    wxPay();

    function wxPay() {
        ajaxToken("/traCourses/wxPay", "POST", {
            body: '课程费用',
            trade_type: 'NATIVE',
            courseOrderId: $("#courseOrderId").val()
        }, function (res) {
            $("#img").attr("src", res.wx.data.code_url)
        });
    }

    monitor();
    var timer = null;

    function monitor() {
        timer = window.setInterval(queryWxPay, 3000)
    }

    function queryWxPay() {
        $.ajax({
            url: "/traCourses/selCoursesOrderState",
            data: {
                courseOrderId: $("#courseOrderId").val()
            },
            success: function (data) {
                if (data.data == 0) {
                    window.clearInterval(timer);
                    $("#img").attr("src", '/img/wxsuccess.png');
                    location.href = '/couInfo/coursePaySuccess?courseOrderId=' + $("#courseOrderId").val() + '&courseId=' + $("#courseId").val()
                }
               // console.log("data", data);
            }
        });
    }

</script>
</body>
</html>